
<template>
  <div id="big-data-container" class="big-data-container">
    <div class="head">
   <span class="timeclass3" style="float: left; padding: 0px 20px" @click="goFun()">首页</span>
      <h1>
        富龙滑雪场客源统计分析
      </h1>
      
    </div>
   
    <div class="data-container">
      <div class="data-righttt">
      <div class="data-right-item">
          <div class="title">性别占比</div>
          <div id="chart-left-4" style="height: 85%;padding:0 20px"></div>
         
          <div class="data-foot-line"></div>
        </div>
        <div class="data-right-item">
          <div class="title">年龄占比</div>
         <div id="chart-left-5" style="height: 85%;padding:0 20px"></div>
          <div class="data-foot-line"></div>
        </div>
      </div>

     <!--<div class="line line-left line1"></div>-->
      <div class="data-lefttt">
       <div class="data-left-itemtt data-right-item" >
           <!-- 地图 -->
          <div
            id="charts-line"
            class="left"
            style="height: 90vh;"
          ></div>
          <div class="data-foot-line"></div>
        </div>
      </div>
      <div class="data-righttt">
        
        <div class="data-right-item">

           <div class="title">地区购买人数</div>

            <div class="scroll_item" style="margin:0;background:#0066FF">
              <div class="isddd">序号</div>
              <div class="isddd">排名</div>
              <div class="isddd">地区名称</div>
              <div class="isddd">购买数量</div>
            </div>
                <div class="InfiniteScroll">
                  <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">
                      <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">
                          <div ref="scrollItemBox">
                              <div class="scroll_item" v-for="(item, index) in listData" :key="index">
                                  
                                  <div class="isddd">{{index+1}}</div>
                                  <div class="isddd">{{item.title}}</div>
                                  <div class="isddd">{{item.name}}</div>
                                  <div class="isddd">{{item.num}}</div>
                              </div>
                          </div>
                          <div v-html="copyHtml"></div>
                      </div>
                  </div>
              </div>
           <div class="data-foot-line"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import 'echarts/map/js/china'
import china from 'echarts/map/json/china.json'
import Community from '@/../src/components/Community/index.vue'
import Cow from '@/../src/components/Community/cow.vue'
import Question from '@/../src/components/Community/question.vue'
import flex from '@/../src/views/charts/flex.vue'
import {
  chartLeft4,
  chartLeft5,
  aDlist,
  aDlistnew
} from './bigdata/chart-options'
import IviewCircle from './bigdata/IviewCircle'
import './bigdata/layoutT2.less'
var echarts = require('echarts')
let timertwas = null
export default {
  components: {
    'iview-circle': IviewCircle
  },
  data () {
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    return {
      date: _this.formatLongDate(new Date()),
      contentNum: {
        current: 0,
        revenue: 0,
        budget: 0
      },
      scrollTop: 0, // 列表滚动高度
      speed: 15, // 滚动的速度

      listData: aDlist.data, // 表示有多少个列表项
      copyHtml: '' // 复制多一份防止滚动到后面出现空白
    }
  },
  mounted () {


    this.initScroll()


    var $chartLeft4 = echarts.init(document.getElementById('chart-left-4'))
    $chartLeft4.setOption(chartLeft4)
    $chartLeft4.resize()


    var $chartLeft5 = echarts.init(document.getElementById('chart-left-5'))
    $chartLeft5.setOption(chartLeft5)
    $chartLeft5.resize()
    let _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {

    }, 500000)
    this.addEventListe()
  },
  methods: {

 goFun(){
      this.$router.push('/home');
    },

    initScroll () {
      this.$nextTick(() => {
        this.copyHtml = this.$refs.scrollItemBox.innerHTML
        this.startScroll()
      })
    },
    // 鼠标移入停止滚动
    mEnter () {
      //clearInterval(timertwas)
    },
    // 鼠标移出继续滚动
    mLeave () {
      //this.startScroll()
    },
    // 开始滚动
    startScroll () {
      timertwas = setInterval(this.scroll, this.speed)
    },
    // 滚动处理方法
    scroll () {
      this.scrollTop++
      // 获取需要滚动的盒子的高度
      let scrollItemBox = this.$refs.scrollItemBox.offsetHeight
 
      // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
      if (this.scrollTop >= scrollItemBox) {
        this.scrollTop = 0
      }
    },
    formatLongDate (date) {
      let myyear = date.getFullYear()

      let mymonth = date.getMonth() + 1
      let myweekday = date.getDate()
      let myHour = date.getHours()
      let myMin = date.getMinutes()
      let mySec = date.getSeconds()

      if (mymonth < 10) {
        mymonth = '0' + mymonth
      }
      if (myweekday < 10) {
        myweekday = '0' + myweekday
      }
      if (myHour < 10) {
        myHour = '0' + myHour
      }
      if (myMin < 10) {
        myMin = '0' + myMin
      }
      if (mySec < 10) {
        mySec = '0' + mySec
      }
      return (
        myyear +
        '-' +
        mymonth +
        '-' +
        myweekday +
        ' ' +
        myHour +
        ':' +
        myMin +
        ':' +
        mySec
      )
    },

    addEventListe () {
      var myChart = echarts.init(document.getElementById('charts-line'))
      var mapName = 'china'
      var data = []
      var toolTipData = []

      /* 获取地图数据 */
      myChart.showLoading()

      myChart.hideLoading()
      var geoCoordMap = {
        // 将军山: [88.187479, 47.828272],
        // '新疆阿拉泰': [88.13963, 47.848393],
        
        北京: [116.4551, 40.2539],
        河北: [114.30, 38.02],
        辽宁: [123.25, 41.48],  
        黑龙江: [126.36, 45.44],
        山东: [117.00, 36.40],
        河南: [113.40, 34.46],
        内蒙古: [111.41, 40.48],
        四川: [104.04, 30.40],
        山西: [112.33, 37.54],
        吉林: [126.556073, 43.843512],
        天津: [117.2, 39.13],
        湖北: [114.17, 30.35],
        江苏: [118.46, 32.03],
        湖南: [112.59, 28.12],
        广东: [113.14, 23.08],
        陕西: [108.57, 34.17],
        浙江:[120.10, 30.16],
        江西: [115.55, 28.40],
        重庆: [107.7539, 30.1904],
        甘肃: [103.51, 36.04],
        上海: [121.480237, 31.236305],
        


        
        哈尔滨: [126.63333, 45.75],
        海南: [109.3, 19.3],
        张家口: [115.282669,40.974676],
        
        新疆: [87.627704, 43.793026],
        西藏: [91.11,29.97],
        太原: [111.3, 37.27],
        
        
        
        
        
        
        
        
        
        安徽: [117.17, 31.52],
        福建: [119.18, 26.05],
        
       
        宁夏: [106.16, 38.27],
        青海: [101.48, 36.38],
        
        
        
        
        广西: [108.19, 22.48],
        
        贵州: [106.42, 26.35],
        云南: [102.42, 25.04],
        
        
        台湾:[121.509062,25.044332],
        香港: [114.173355, 22.320048],
        澳门: [ 113.54909,22.198951],
        国外: [ 113.54909,22.198951]

      }

      var GZData = [
   
        [
          {
            name: '张家口'
          },
          {
            name: '云南',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '国外',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '香港',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '澳门',
            value: 80 , num: '100'
          }
        ],
         [
          {
            name: '张家口'
          },
          {
            name: '台湾',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '甘肃',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '陕西',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '西藏',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '天津',
            value: 80 , num: '100'
          }
        ],

        [
          {
            name: '张家口'
          },
          {
            name: '贵州',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '四川',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '重庆',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '广东',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '广西',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '湖南',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '湖北',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '河南',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '青海',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '宁夏',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '江苏',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '安徽',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '福建',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '江西',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '山东',
            value: 80 , num: '100'
          }
        ],
        
        [
          {
            name: '张家口'
          },
          {
            name: '上海',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '黑龙江',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '吉林',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '辽宁',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '内蒙古',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '山西',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '河北',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '浙江',
            value: 80 , num: '100'
          }
        ],
        
       
        [
          {
            name: '张家口'
          },
          {
            name: '北京',
            value: 20
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '海南',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: '北京',
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: "新疆",
            value: 80 , num: '100'
          }
        ],
        [
          {
            name: '张家口'
          },
          {
            name: "张家口",
            value: 120 , num: '100'
          }
        ],
        
      ]
      
     
      console.log(GZData)
      
      //var GZData = JSON.parse(localStorage.getItem("aDlistnew"))
    
     


      var convertData = function (data) {
    
        var res = []
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i]
          var fromCoord = geoCoordMap[dataItem[0].name]
          var toCoord = geoCoordMap[dataItem[1].name]
          var num =dataItem[1].num
          var title =dataItem[1].title
 
          if (fromCoord && toCoord) {
            
            res.push({
              fromName: dataItem[0].name,
              name: dataItem[1].name,
              coords: [toCoord, fromCoord],
              num:num,
              title:title
            })
          }
        }
  
        return res
      }

      var planePath =
        'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
      var color = ['#ffff00']
      var series = [];
      [['张家口', aDlistnew]].forEach(function (item, i) {

        series.push(
          {
            name: '去往富龙滑雪场',
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'none'],
            symbolSize: 10,
            effect: {
              show: true,
              period: 6,
              trailLength: 0,
               symbol: planePath,
              symbolSize: 15,
            },
            lineStyle: {
              normal: {
                color: color[i],
                width: 1,
                opacity: 0.6,
                curveness: 0.2,
              },
            },
            data: convertData(item[1]),
            

          },
          {
            name: '购买数量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: true,
                position: 'right',
                formatter: '{b}'
              }
            },
            symbolSize: function (val) {
              return val[2] / 8
            },
            itemStyle: {
              normal: {
                color: color[i]
              }
            },
            data: item[1].map(function (dataItem) {
              console.log( dataItem[1])
              return {
            
                name: dataItem[1].name,
                title: dataItem[1].title,
                num: dataItem[1].num,
                value: geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value  
                ])
              }
            })
          }
        )
      })

      let option = {
        tooltip: {
          trigger: 'item'
        },
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: false
            }
          },
           tooltip: {
            show: true,
            confine: true,
            formatter: function (params) {
              console.log(params)
              return [
                params.data.name,
                '目的地:'+'富龙滑雪场',
                '销量排行:'+params.data.title,
                '购买数量:'+params.data.num,
                
              ].join('<br>');
            }
          },
          roam: true,
          itemStyle: {
            normal: {
              //          	color: '#ddd',
              borderColor: 'rgba(147, 235, 248, 1)',
              borderWidth: 1,
              areaColor: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(175,238,238, 0)' // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: 'rgba(	47,79,79, .1)' // 100% 处的颜色
                  }
                ],
                globalCoord: false // 缺省为 false
              },
              shadowColor: 'rgba(128, 217, 248, 1)',
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10
            },
            emphasis: {
              areaColor: '#389BB7',
              borderWidth: 0
            }
          }
        },
        series: series
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>
<style scoped lang="less">
.data-left-item-4tt {
  display: flex;
  .item {
    height: 100%;
    width: 33%;
    padding-top: 30px;
  }
}
.center-top-num-flex {
  height: 80px;
  padding-top: 7px;
  display: flex;
  .item {
    flex: 1;
    text-align: center;
  }
  .text {
    color: #fcf0d8;
    font-size: 14px;
  }
  .num {
    font-size: 34px;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC,
      Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial,
      sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    font-weight: bold;
    color: #67caca;
  }
}
.left_top_main {
  width: 100%;
  height: 100%;
  position: relative;
}

.left_top_main .left {
  width: 200px;
  height: 100%;
  background: #ffccaa;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  padding-top: 80px;
  box-sizing: border-box;
}

.right-3 {
  display: flex;
  flex-direction: column;
  /* margin-top: 20px; */
}

.right-3 .right-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.right-3 .item {
  text-align: left;
  border-bottom: 1px solid #549069;
  flex: 1;
  display: flex;
  padding: 5px 10px;
  margin: 0 10px;
  font-size: 14px;
  line-height: 30px;
}

.right-3 .item:last-child {
  border-bottom: 0;
}

.right-3 .item > div {
  color: white;
}

.right-3 .top {
  width: 60px;
  position: relative;
}

.right-3 .top span {
  position: absolute;
  width: 20px;
  line-height: 20px;
  top: 5px;
  text-align: center;
  border-radius: 5px;
}

.right-3 .top-1 span {
  background: #e80d0d;
}

.right-3 .top-2 span {
  background: #00c935;
}

.right-3 .top-3 span {
  background: #0083f4;
}

.right-3 .num {
  width: 88px;
}

.right-3 .pro-name {
  flex: 1;
}
.InfiniteScroll {
    box-sizing: border-box;

}

.scroll_parent_box {
    width: 100%;
    height: 80.5vh;
    overflow: hidden;
    box-sizing: border-box;

}

.scroll_list {
    transition: all 0ms ease-in 0s
}
.scroll_item {
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #67caca;
    margin-bottom: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 15px;
    
}
.isddd{
  width:25%
}
.scroll_item div{
  color:#ffffff;
}
.scroll_item:hover{
    background:#0066FF;
    color:#ffffff;
}

.line {
  //background: #01dde8; // 线的颜色
  height: 4px; // 线的宽度
  position: absolute;
  transform-origin: left top;
  z-index: 10;
  
  width: 100%; // 线的长度
  //top: 50px; // 位置上偏移
  //left: 15px; // 位置左偏移
  //transform: rotateZ(35deg); // 线的旋转角度
}

// 用来做流动效果的
.line-left::before {
  content: "";
  position: absolute;
  height: 4px; // 流体的宽度，可以适当宽一些，但是注意位置偏移
  width: 20px; // 流体路线长度，最好与线保持一致
  background: linear-gradient(to left, transparent, #fff); // 流体样式，这里是渐变
  animation: fade-left 5s linear infinite; //使用fade-left动画
  box-shadow: 0px 0px 5px 5px #72dffa; // 外发光
}

// 向左流动，right改left为向右流动
@keyframes fade-left {
  0% {
    right: 0px;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    right: calc(100% - 40px); // 到达终点时位置要减去自身的长度
    opacity: 0;
  }
}


</style>
